import React, { Component } from 'react';
import {Table,Modal,Button,OverlayTrigger,Tooltip,Popover,ButtonToolbar,Tabs,Tab} from 'react-bootstrap';

import '../css/modals.css';
export default class MenuItems extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal1: true,
            showModal2:false,
            showModal3:false,
            smShow: false,
            lgShow: false
        };
    }
    openModal2=()=>{
        this.setState({
            showModal2: true
        });
    }
    closeModel1=()=>{
        this.setState({
            showModal1: false
        });
    }
    closeModel2=()=>{
        this.setState({
            showModal2: false
        });
    }
    closeModel3=()=>{
        this.setState({
            showModal3: false
        });
    }

    render() {
        const wellStyles = {maxWidth: 800, margin: '0 10px 10px'};
        const popover = (
            <Popover id="modal-popover" title="popover">
                very popover. such engagement
            </Popover>
        );
        const tooltip = (
            <Tooltip id="modal-tooltip">
                wow.
            </Tooltip>
        );
        let smClose = () => this.setState({ smShow: false });
        let lgClose = () => this.setState({ lgShow: false });

        return (
            <div className="modals">
                <div className="well" style={wellStyles}>
                    <Button onClick={()=>this.setState({ showModal1: true})}>显示对话框1</Button><br/><br/>
                    <Button
                        bsStyle="primary"
                        bsSize="large"
                        onClick={()=>this.openModal2()}
                    >
                        Launch demo modal
                    </Button>
                    <br/><br/>
                    <Button
                        bsStyle="primary"
                        bsSize="large"
                        onClick={() => this.setState({ showModal3: true})}
                    >
                        Launch contained modal
                    </Button>
                    <br/><br/>

                    <ButtonToolbar>
                        <Button bsStyle="primary" onClick={()=>this.setState({ smShow: true })}>
                            Launch small demo modal
                        </Button>
                        <Button bsStyle="primary" onClick={()=>this.setState({ lgShow: true })}>
                            Launch large demo modal
                        </Button>

                        <MySmallModal show={this.state.smShow} onHide={smClose} />
                        <MyLargeModal show={this.state.lgShow} onHide={lgClose} />
                    </ButtonToolbar>


                    <Modal show={this.state.showModal1} dialogClassName="modal_wapper">
                        <Modal.Header>
                            <Modal.Title>Modal title</Modal.Title>
                        </Modal.Header>

                        <Modal.Body>
                            One fine body...
                        </Modal.Body>

                        <Modal.Footer>
                            <Button onClick={this.closeModel1}>Close</Button>
                            <Button bsStyle="primary">Save changes</Button>
                        </Modal.Footer>

                    </Modal>


                    <Modal show={this.state.showModal2} onHide={this.closeModel2} dialogClassName="dialog2">
                        <Modal.Header closeButton>
                            <Modal.Title>Modal heading</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <h4>Text in a modal</h4>
                            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

                            <h4>Popover in a modal</h4>
                            <p>there is a <OverlayTrigger overlay={popover}><a href="#">popover</a></OverlayTrigger> here</p>

                            <h4>Tooltips in a modal</h4>
                            <p>there is a <OverlayTrigger overlay={tooltip}><a href="#">tooltip</a></OverlayTrigger> here</p>

                            <hr />

                            <h4>Overflowing text to show scroll behavior</h4>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={this.closeModel2} >关闭</Button>
                        </Modal.Footer>
                    </Modal>

                    <Modal
                        show={this.state.showModal3}
                        onHide={this.closeModel3}
                        container={this}
                        aria-labelledby="contained-modal-title"
                    >
                        <Modal.Header closeButton>
                            <Modal.Title id="contained-modal-title">Contained Modal</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={this.closeModel3}>Close</Button>
                        </Modal.Footer>
                    </Modal>
                </div>

                <div className="well" style={wellStyles}>
                    <h2>Sizing modals using custom CSS</h2>
                    <p>You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.</p>
                    <Example4/>
                </div>
                <div className="well" style={wellStyles}>
                    <h2>Props</h2>
                    <Tabs>
                        <Tab eventKey={1} title="Modal">
                            <Table class="prop-table table table-striped table-bordered" data-reactid="1850">
                                <thead data-reactid="1851">
                                <tr data-reactid="1852">
                                    <th data-reactid="1853">
                                        Name
                                    </th>
                                    <th data-reactid="1854">
                                        Type
                                    </th>
                                    <th data-reactid="1855">
                                        Default
                                    </th>
                                    <th data-reactid="1856">
                                        Description
                                    </th>
                                </tr>
                                </thead>
                                <tbody data-reactid="1857">
                                <tr class="prop-table-row" data-reactid="1858">
                                    <td data-reactid="1859">
                                        animation
                                    </td>
                                    <td data-reactid="1862">
                                        <div data-reactid="1863">
                                            boolean
                                        </div>
                                    </td>
                                    <td data-reactid="1864">
                                        true
                                    </td>
                                    <td data-reactid="1865">
                                        <div class="prop-desc" data-reactid="1866">
                                            <p>
                                                Open and close the Modal with a slide and fade animation.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1867">
                                    <td data-reactid="1868">
                                        autoFocus
                                    </td>
                                    <td data-reactid="1871">
                                        <div data-reactid="1872">
                                            boolean
                                        </div>
                                    </td>
                                    <td data-reactid="1873"></td>
                                    <td data-reactid="1874">
                                        <div class="prop-desc" data-reactid="1875">
                                            <p>
                                                When <code>true</code> The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1876">
                                    <td data-reactid="1877">
                                        backdrop
                                    </td>
                                    <td data-reactid="1880">
                                        <div data-reactid="1881">
                                            <span data-reactid="1882">one of: <code data-reactid="1884">'static'</code><span data-reactid="1885">,</span> <code data-reactid="1886">true</code><span data-reactid="1887">,</span> <code data-reactid="1888">false</code></span>
                                        </div>
                                    </td>
                                    <td data-reactid="1889"></td>
                                    <td data-reactid="1890">
                                        <div class="prop-desc" data-reactid="1891">
                                            <p>
                                                Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1892">
                                    <td data-reactid="1893">
                                        bsClass
                                    </td>
                                    <td data-reactid="1896">
                                        <div data-reactid="1897">
                                            string
                                        </div>
                                    </td>
                                    <td data-reactid="1898">
                                        'modal'
                                    </td>
                                    <td data-reactid="1899">
                                        <div class="prop-desc" data-reactid="1900">
                                            <p>
                                                Base CSS class and prefix for the component. Generally one should only change <code>bsClass</code> to provide new, non-Bootstrap, CSS styles for a component.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1901">
                                    <td data-reactid="1902">
                                        bsSize
                                    </td>
                                    <td data-reactid="1905">
                                        <div data-reactid="1906">
                                            <span data-reactid="1907">one of: <code data-reactid="1909">"lg"</code><span data-reactid="1910">,</span> <code data-reactid="1911">"large"</code><span data-reactid="1912">,</span> <code data-reactid="1913">"sm"</code><span data-reactid="1914">,</span> <code data-reactid="1915">"small"</code></span>
                                        </div>
                                    </td>
                                    <td data-reactid="1916"></td>
                                    <td data-reactid="1917">
                                        <div class="prop-desc" data-reactid="1918">
                                            <p>
                                                Component size variations.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1919">
                                    <td data-reactid="1920">
                                        dialogClassName
                                    </td>
                                    <td data-reactid="1923">
                                        <div data-reactid="1924">
                                            string
                                        </div>
                                    </td>
                                    <td data-reactid="1925"></td>
                                    <td data-reactid="1926">
                                        <div class="prop-desc" data-reactid="1927">
                                            <p>
                                                A css class to apply to the Modal dialog DOM node.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1928">
                                    <td data-reactid="1929">
                                        dialogComponentClass
                                    </td>
                                    <td data-reactid="1932">
                                        <div data-reactid="1933">
                                            elementType
                                        </div>
                                    </td>
                                    <td data-reactid="1934">
                                        ModalDialog
                                    </td>
                                    <td data-reactid="1935">
                                        <div class="prop-desc" data-reactid="1936">
                                            <p>
                                                A Component type that provides the modal content Markup. This is a useful prop when you want to use your own styles and markup to create a custom modal component.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1937">
                                    <td data-reactid="1938">
                                        enforceFocus
                                    </td>
                                    <td data-reactid="1941">
                                        <div data-reactid="1942">
                                            boolean
                                        </div>
                                    </td>
                                    <td data-reactid="1943"></td>
                                    <td data-reactid="1944">
                                        <div class="prop-desc" data-reactid="1945">
                                            <p>
                                                When <code>true</code> The modal will prevent focus from leaving the Modal while open. Consider leaving the default value here, as it is necessary to make the Modal work well with assistive technologies, such as screen readers.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1946">
                                    <td data-reactid="1947">
                                        keyboard
                                    </td>
                                    <td data-reactid="1950">
                                        <div data-reactid="1951">
                                            boolean
                                        </div>
                                    </td>
                                    <td data-reactid="1952"></td>
                                    <td data-reactid="1953">
                                        <div class="prop-desc" data-reactid="1954">
                                            <p>
                                                Close the modal when escape key is pressed
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1955">
                                    <td data-reactid="1956">
                                        onEnter
                                    </td>
                                    <td data-reactid="1959">
                                        <div data-reactid="1960">
                                            function
                                        </div>
                                    </td>
                                    <td data-reactid="1961"></td>
                                    <td data-reactid="1962">
                                        <div class="prop-desc" data-reactid="1963">
                                            <p>
                                                Callback fired before the Modal transitions in
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1964">
                                    <td data-reactid="1965">
                                        onEntered
                                    </td>
                                    <td data-reactid="1968">
                                        <div data-reactid="1969">
                                            function
                                        </div>
                                    </td>
                                    <td data-reactid="1970"></td>
                                    <td data-reactid="1971">
                                        <div class="prop-desc" data-reactid="1972">
                                            <p>
                                                Callback fired after the Modal finishes transitioning in
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1973">
                                    <td data-reactid="1974">
                                        onEntering
                                    </td>
                                    <td data-reactid="1977">
                                        <div data-reactid="1978">
                                            function
                                        </div>
                                    </td>
                                    <td data-reactid="1979"></td>
                                    <td data-reactid="1980">
                                        <div class="prop-desc" data-reactid="1981">
                                            <p>
                                                Callback fired as the Modal begins to transition in
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1982">
                                    <td data-reactid="1983">
                                        onExit
                                    </td>
                                    <td data-reactid="1986">
                                        <div data-reactid="1987">
                                            function
                                        </div>
                                    </td>
                                    <td data-reactid="1988"></td>
                                    <td data-reactid="1989">
                                        <div class="prop-desc" data-reactid="1990">
                                            <p>
                                                Callback fired right before the Modal transitions out
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="1991">
                                    <td data-reactid="1992">
                                        onExited
                                    </td>
                                    <td data-reactid="1995">
                                        <div data-reactid="1996">
                                            function
                                        </div>
                                    </td>
                                    <td data-reactid="1997"></td>
                                    <td data-reactid="1998">
                                        <div class="prop-desc" data-reactid="1999">
                                            <p>
                                                Callback fired after the Modal finishes transitioning out
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="2000">
                                    <td data-reactid="2001">
                                        onExiting
                                    </td>
                                    <td data-reactid="2004">
                                        <div data-reactid="2005">
                                            function
                                        </div>
                                    </td>
                                    <td data-reactid="2006"></td>
                                    <td data-reactid="2007">
                                        <div class="prop-desc" data-reactid="2008">
                                            <p>
                                                Callback fired as the Modal begins to transition out
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="2009">
                                    <td data-reactid="2010">
                                        onHide
                                    </td>
                                    <td data-reactid="2013">
                                        <div data-reactid="2014">
                                            function
                                        </div>
                                    </td>
                                    <td data-reactid="2015"></td>
                                    <td data-reactid="2016">
                                        <div class="prop-desc" data-reactid="2017">
                                            <p>
                                                A callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="2018">
                                    <td data-reactid="2019">
                                        restoreFocus
                                    </td>
                                    <td data-reactid="2022">
                                        <div data-reactid="2023">
                                            boolean
                                        </div>
                                    </td>
                                    <td data-reactid="2024"></td>
                                    <td data-reactid="2025">
                                        <div class="prop-desc" data-reactid="2026">
                                            <p>
                                                When <code>true</code> The modal will restore focus to previously focused element once modal is hidden
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="prop-table-row" data-reactid="2027">
                                    <td data-reactid="2028">
                                        show
                                    </td>
                                    <td data-reactid="2031">
                                        <div data-reactid="2032">
                                            boolean
                                        </div>
                                    </td>
                                    <td data-reactid="2033"></td>
                                    <td data-reactid="2034">
                                        <div class="prop-desc" data-reactid="2035">
                                            <p>
                                                When <code>true</code> The modal will show itself.
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </Table>

                        </Tab>
                        <Tab eventKey={2} title="Modal.Header">
                            <Table class="prop-table table table-striped table-bordered" data-reactid="2040"><thead data-reactid="2041"><tr data-reactid="2042"><th data-reactid="2043">Name</th><th data-reactid="2044">Type</th><th data-reactid="2045">Default</th><th data-reactid="2046">Description</th></tr></thead><tbody data-reactid="2047"><tr class="prop-table-row" data-reactid="2048"><td data-reactid="2049">aria-label </td><td data-reactid="2052"><div data-reactid="2053">string</div></td><td data-reactid="2054">'Close'</td><td data-reactid="2055"><div class="prop-desc" data-reactid="2056"><p>The 'aria-label' attribute provides an accessible label for the close
                                button. It is used for Assistive Technology when the label text is not
                                readable.</p>
                            </div></td></tr><tr class="prop-table-row" data-reactid="2057"><td data-reactid="2058">bsClass </td><td data-reactid="2061"><div data-reactid="2062">string</div></td><td data-reactid="2063">'modal-header'</td><td data-reactid="2064"><div class="prop-desc" data-reactid="2065"><p>Base CSS class and prefix for the component. Generally one should only change <code>bsClass</code> to provide new, non-Bootstrap, CSS styles for a component.</p>
                            </div></td></tr><tr class="prop-table-row" data-reactid="2066"><td data-reactid="2067">closeButton </td><td data-reactid="2070"><div data-reactid="2071">boolean</div></td><td data-reactid="2072">false</td><td data-reactid="2073"><div class="prop-desc" data-reactid="2074"><p>Specify whether the Component should contain a close button</p>
                            </div></td></tr><tr class="prop-table-row" data-reactid="2075"><td data-reactid="2076">onHide </td><td data-reactid="2079"><div data-reactid="2080">function</div></td><td data-reactid="2081"></td><td data-reactid="2082"><div class="prop-desc" data-reactid="2083"><p>A Callback fired when the close button is clicked. If used directly inside
                                a Modal component, the onHide will automatically be propagated up to the
                                parent Modal <code>onHide</code>.</p>
                            </div></td></tr></tbody></Table>
                        </Tab>
                        <Tab eventKey={3} title="Modal.Title">
                            <Table class="prop-table table table-striped table-bordered" data-reactid="2088"><thead data-reactid="2089"><tr data-reactid="2090"><th data-reactid="2091">Name</th><th data-reactid="2092">Type</th><th data-reactid="2093">Default</th><th data-reactid="2094">Description</th></tr></thead><tbody data-reactid="2095"><tr class="prop-table-row" data-reactid="2096"><td data-reactid="2097">bsClass </td><td data-reactid="2100"><div data-reactid="2101">string</div></td><td data-reactid="2102">'modal-title'</td><td data-reactid="2103"><div class="prop-desc" data-reactid="2104"><p>Base CSS class and prefix for the component. Generally one should only change <code>bsClass</code> to provide new, non-Bootstrap, CSS styles for a component.</p>
                            </div></td></tr><tr class="prop-table-row" data-reactid="2105"><td data-reactid="2106">componentClass </td><td data-reactid="2109"><div data-reactid="2110">elementType</div></td><td data-reactid="2111">'h4'</td><td data-reactid="2112"><div class="prop-desc" data-reactid="2113"><p>You can use a custom element type for this component.</p>
                            </div></td></tr></tbody></Table>
                        </Tab>
                        <Tab eventKey={4} title="Modal.Body">
                            <Table class="prop-table table table-striped table-bordered" data-reactid="2118"><thead data-reactid="2119"><tr data-reactid="2120"><th data-reactid="2121">Name</th><th data-reactid="2122">Type</th><th data-reactid="2123">Default</th><th data-reactid="2124">Description</th></tr></thead><tbody data-reactid="2125"><tr class="prop-table-row" data-reactid="2126"><td data-reactid="2127">bsClass </td><td data-reactid="2130"><div data-reactid="2131">string</div></td><td data-reactid="2132">'modal-body'</td><td data-reactid="2133"><div class="prop-desc" data-reactid="2134"><p>Base CSS class and prefix for the component. Generally one should only change <code>bsClass</code> to provide new, non-Bootstrap, CSS styles for a component.</p>
                            </div></td></tr><tr class="prop-table-row" data-reactid="2135"><td data-reactid="2136">componentClass </td><td data-reactid="2139"><div data-reactid="2140">elementType</div></td><td data-reactid="2141">'div'</td><td data-reactid="2142"><div class="prop-desc" data-reactid="2143"><p>You can use a custom element type for this component.</p>
                            </div></td></tr></tbody></Table>
                        </Tab>
                        <Tab eventKey={5} title="Modal.Footer">
                            <Table class="prop-table table table-striped table-bordered" data-reactid="2148"><thead data-reactid="2149"><tr data-reactid="2150"><th data-reactid="2151">Name</th><th data-reactid="2152">Type</th><th data-reactid="2153">Default</th><th data-reactid="2154">Description</th></tr></thead><tbody data-reactid="2155"><tr class="prop-table-row" data-reactid="2156"><td data-reactid="2157">bsClass </td><td data-reactid="2160"><div data-reactid="2161">string</div></td><td data-reactid="2162">'modal-footer'</td><td data-reactid="2163"><div class="prop-desc" data-reactid="2164"><p>Base CSS class and prefix for the component. Generally one should only change <code>bsClass</code> to provide new, non-Bootstrap, CSS styles for a component.</p>
                            </div></td></tr><tr class="prop-table-row" data-reactid="2165"><td data-reactid="2166">componentClass </td><td data-reactid="2169"><div data-reactid="2170">elementType</div></td><td data-reactid="2171">'div'</td><td data-reactid="2172"><div class="prop-desc" data-reactid="2173"><p>You can use a custom element type for this component.</p>
                            </div></td></tr></tbody></Table>
                        </Tab>
                    </Tabs>
                </div>
            </div>
        )
    }
}

const MySmallModal = React.createClass({
    render() {
        return (
            <Modal {...this.props} bsSize="small" aria-labelledby="contained-modal-title-sm">
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-sm">Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>Wrapped Text</h4>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
});

const MyLargeModal = React.createClass({
    render() {
        return (
            <Modal {...this.props} bsSize="large" aria-labelledby="contained-modal-title-lg">
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-lg">Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>Wrapped Text</h4>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
});

const Example4 = React.createClass({
    getInitialState() {
        return {show: false};
    },

    showModal() {
        this.setState({show: true});
    },

    hideModal() {
        this.setState({show: false});
    },

    render() {
        return (
            <ButtonToolbar>
                <Button bsStyle="primary" onClick={this.showModal}>
                    Launch demo modal
                </Button>

                <Modal
                    {...this.props}
                    show={this.state.show}
                    onHide={this.hideModal}
                    dialogClassName="custom-modal"
                >
                    <Modal.Header closeButton>
                        <Modal.Title id="contained-modal-title-lg">Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <h4>Wrapped Text</h4>
                        <p>Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde commodi aspernatur enim, consectetur. Cumque deleniti temporibus ipsam atque a dolores quisquam quisquam adipisci possimus laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem!
                            Mollitia reiciendis porro quo magni incidunt dolore amet atque facilis ipsum deleniti rem! Dolores debitis voluptatibus ipsum dicta. Dolor quod amet ab sint esse distinctio tenetur. Veritatis laudantium quibusdam quidem corporis architecto veritatis. Ex facilis minima beatae sunt perspiciatis placeat. Quasi corporis
                            odio eaque voluptatibus ratione magnam nulla? Amet cum maiores consequuntur totam dicta! Inventore adipisicing vel vero odio modi doloremque? Vitae porro impedit ea minima laboriosam quisquam neque. Perspiciatis omnis obcaecati consequatur sunt deleniti similique facilis sequi. Ipsum harum vitae modi reiciendis officiis.
                            Quas laudantium laudantium modi corporis nihil provident consectetur omnis, natus nulla distinctio illum corporis. Sit ex earum odio ratione consequatur odit minus laborum? Eos? Sit ipsum illum architecto aspernatur perspiciatis error fuga illum, tempora harum earum, a dolores. Animi facilis inventore harum dolore accusamus
                            fuga provident molestiae eum! Odit dicta error dolorem sunt reprehenderit. Sit similique iure quae obcaecati harum. Eum saepe fugit magnam dicta aliquam? Sapiente possimus aliquam fugiat officia culpa sint! Beatae voluptates voluptatem excepturi molestiae alias in tenetur beatae placeat architecto. Sit possimus rerum
                            fugiat sapiente aspernatur. Necessitatibus tempora animi dicta perspiciatis tempora a velit in! Doloribus perspiciatis doloribus suscipit nam earum. Deleniti veritatis eaque totam assumenda fuga sapiente! Id recusandae. Consectetur necessitatibus eaque velit nobis aliquid? Fugit illum qui suscipit aspernatur alias ipsum
                            repudiandae! Quia omnis quisquam dignissimos a mollitia. Suscipit aspernatur eum maiores repellendus ipsum doloribus alias voluptatum consequatur. Consectetur quibusdam veniam quas tenetur necessitatibus repudiandae? Rem optio vel alias neque optio sapiente quidem similique reiciendis tempore. Illum accusamus officia
                            cum enim minima eligendi consectetur nemo veritatis nam nisi! Adipisicing nobis perspiciatis dolorum adipisci soluta architecto doloremque voluptatibus omnis debitis quas repellendus. Consequuntur assumenda illum commodi mollitia asperiores? Quis aspernatur consequatur modi veritatis aliquid at? Atque vel iure quos.
                            Amet provident voluptatem amet aliquam deserunt sint, elit dolorem ipsa, voluptas? Quos esse facilis neque nihil sequi non? Voluptates rem ab quae dicta culpa dolorum sed atque molestias debitis omnis! Sit sint repellendus deleniti officiis distinctio. Impedit vel quos harum doloribus corporis. Laborum ullam nemo quaerat
                            reiciendis recusandae minima dicta molestias rerum. Voluptas et ut omnis est ipsum accusamus harum. Amet exercitationem quasi velit inventore neque doloremque! Consequatur neque dolorem vel impedit sunt voluptate. Amet quo amet magni exercitationem libero recusandae possimus pariatur. Cumque eum blanditiis vel vitae
                            distinctio! Tempora! Consectetur sit eligendi neque sunt soluta laudantium natus qui aperiam quisquam consectetur consequatur sit sint a unde et. At voluptas ut officiis esse totam quasi dolorem! Hic deserunt doloribus repudiandae! Lorem quod ab nostrum asperiores aliquam ab id consequatur, expedita? Tempora quaerat
                            ex ea temporibus in tempore voluptates cumque. Quidem nam dolor reiciendis qui dolor assumenda ipsam veritatis quasi. Esse! Sit consectetur hic et sunt iste! Accusantium atque elit voluptate asperiores corrupti temporibus mollitia! Placeat soluta odio ad blanditiis nisi. Eius reiciendis id quos dolorum eaque suscipit
                            magni delectus maxime. Sit odit provident vel magnam quod. Possimus eligendi non corrupti tenetur culpa accusantium quod quis. Voluptatum quaerat animi dolore maiores molestias voluptate? Necessitatibus illo omnis laborum hic enim minima! Similique. Dolor voluptatum reprehenderit nihil adipisci aperiam voluptatem soluta
                            magnam accusamus iste incidunt tempore consequatur illo illo odit. Asperiores nesciunt iusto nemo animi ratione. Sunt odit similique doloribus temporibus reiciendis! Ullam. Dolor dolores veniam animi sequi dolores molestias voluptatem iure velit. Elit dolore quaerat incidunt enim aut distinctio. Ratione molestiae laboriosam
                            similique laboriosam eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.</p>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.hideModal}>Close</Button>
                    </Modal.Footer>
                </Modal>
            </ButtonToolbar>
        );
    }
});